﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CategoryLayer</title>
    @Html.Partial("_Title")
    <script src="~/Theme/layui/layui.js"></script>
    <script src="~/Theme/layer/layer.js"></script>
    <script src="~/Theme/MyJs/jquery.tmpl.min.js"></script>
    <link href="~/Theme/MyCSS/Index.css" rel="stylesheet" />
</head>
<body>
    <!--搜索类目选择弹层-->
    <div class="categoryLayer">
        <div class="categorySearch">
            <div class="searchBox">
                <input class="keyword" type="text" placeholder="输入类目关键字" />
                <input class="btn_search" type="button" value="搜索" />
            </div>
            <div class="categoryContent" >
                <div class="column f1">
                    <ul id="ul_1">
                    </ul>
                </div>
                <div class="column f2" style="display: none;">
                    <ul id="ul_2">
                    </ul>
                </div>
                <div class="column f3" style="display: none;">
                    <ul id="ul_3">
                    </ul>
                </div>
            </div>
            <div class="categorySearchContent" style="display:none">
                <div class="categorySearchContentTitlte">当前搜索行业类目结果如下，如没有合适的分类，<a class="backToSelect" href="javascript:;">请重新选择分类</a></div>
                <div class="categorySearchContentShow">
                    <ul>
                       
                    </ul>
                </div>
            </div>
            <div class="categoryCrumbs">
                请选择行业类目
            </div>
        </div>
        <div class="categoryLayerSubmit">
            <input class="categoryLayerbtn_yes" type="button" value="确定" />
            <input class="categoryLayerbtn_cancel" type="button" value="取消" />
        </div>
    </div>
    <script type="text/x-jquery-tmpl" id="demoCategory">
        <li>
            <span class="categoryName">${categoryName}</span>
            <span>〉</span>
        </li>
    </script>


</body>
</html>

<script>

    var categoryCrumbs1 = '';//保存面包屑
    var categoryCrumbs2 = '';
    var categoryCrumbs3 = '';
    var hasSub = true;//是否是叶子目录
    $(function () {

        beginGetCategorys();
    });


    //通过父id查询类目
    function findCtegory(pId, callBack) {
        $.post('/CategoryLayer/GetGategory', { 'parentId': pId }, function (data) {
            callBack(JSON.parse(data));
        });
    }
    //绑定类别
    function bindCategorys(html_id, items) {
        var $Id = $("#" + html_id);
        $Id.html("");
        $("#demoCategory").tmpl(items).appendTo($Id);
    }

    //通过父页面的产品类目给列表添加选中状态
    function addSelectCategoryState($_id, cName) {
        $($_id).find('li').each(function () {
            var item = $.tmplItem(this).data;
            if (item.categoryName == cName) {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");

                //设置选中类目显示在滚动条中间
                var scrollheight = $(this).offset().top - $($_id).offset().top;
                $($_id).scrollTop(scrollheight - 100);

            }
        });
    }
    //回传类目组合 渲染列表
    function back(str) {
        var strs = str.split(">");//拆分类目
        if (strs.length > 0 && strs.indexOf("所有类目") < 0) {

            //通过父页面的产品类目重新渲染弹层类目列表
            findCtegory('0', function (data_1) {

                bindCategorys("ul_1", data_1);//绑定列表1

                //通过父页面的产品类目给列表添加选中状态
                addSelectCategoryState("#ul_1", strs[0]);
                categoryCrumbs1 = strs[0];//面包屑

                for (var i = 0; i < data_1.length; i++) {
                    if (data_1[i].categoryName == strs[0]) {
                        findCtegory(data_1[i].categoryID, function (data_2) {
                            if (data_2.length > 0) {
                                //绑定列表2并显示
                                bindCategorys("ul_2", data_2);
                                $(".f2").show();

                                //通过父页面的产品类目给列表添加选中状态
                                addSelectCategoryState("#ul_2", strs[1]);
                                categoryCrumbs2 = categoryCrumbs1 + ">" + strs[1];//面包屑

                                for (var i = 0; i < data_2.length; i++) {
                                    if (data_2[i].categoryName == strs[1]) {
                                        findCtegory(data_2[i].categoryID, function (data_3) {
                                            if (data_3.length > 0) {
                                                //绑定列表3并显示
                                                bindCategorys("ul_3", data_3);
                                                $(".f3").show();

                                                //通过父页面的产品类目给列表添加选中状态
                                                addSelectCategoryState("#ul_3", strs[2]);
                                                categoryCrumbs3 = categoryCrumbs2 + ">" + strs[2];//面包屑
                                            } else {
                                                categoryCrumbs3 = categoryCrumbs2;
                                            }
                                        });
                                    }
                                }

                            }
                        });
                    }
                }
            });

            //类目面包屑
            $(".categoryCrumbs").text(str);
        }
        else {
            //初始渲染列表
            findCtegory('0', function (data_1) {
                bindCategorys("ul_1", data_1);
            })
        }
    }

    //渲染初始页
    function beginGetCategorys() {
        var str = parent.$(".selectCatgory input").val();//获取父页面产品类目显示值
        back(str);
    }


    //点击类别
    $("#ul_1").on("click", "li", function () {
        var item = $.tmplItem(this).data;
        //把选中的类目放到div中
        $(".categoryCrumbs").text(item.categoryName);
        categoryCrumbs1 = $(".categoryCrumbs").text();

        findCtegory(item.categoryID, function (data) {
            if (data.length > 0) {
                bindCategorys("ul_2", data);//绑定并显示下级类目
                $(".f2").show();
                $(".f3").hide();
                hasSub = false;
            }
            else {
                $(".f2").hide();
                $(".f3").hide();
                categoryCrumbs3 = categoryCrumbs1;
            }
        })

        //添加选中状态
        $(this).addClass("active");
        $(this).siblings().removeClass("active");

    });
    $("#ul_2").on("click", "li", function () {
        var item = $.tmplItem(this).data;
        //
        categoryCrumbs2 = categoryCrumbs1 + ">" + item.categoryName;
        $(".categoryCrumbs").text(categoryCrumbs2);

        //
        findCtegory(item.categoryID, function (data) {
            if (data.length > 0) {
                bindCategorys("ul_3", data);
                $(".f3").show();
                hasSub = false;

            }
            else {
                $(".f3").hide();
                hasSub = true;
                categoryCrumbs3 = categoryCrumbs2;
            }
        })

        //
        $(this).addClass("active");
        $(this).siblings().removeClass("active");

    });
    $("#ul_3").on("click", "li", function () {
        //
        var item = $.tmplItem(this).data;
        categoryCrumbs3 = categoryCrumbs2 + ">" + item.categoryName;
        $(".categoryCrumbs").text(categoryCrumbs3);
        //
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        hasSub = true;


    });

    var index = parent.layer.getFrameIndex(window.name);
    //弹层确定按钮
    $(".categoryLayerbtn_yes").click(function () {
        if (hasSub && categoryCrumbs3 != '') {
            parent.$(".selectCatgory input").val(categoryCrumbs3);
            parent.layer.close(index);
        }
        else {
            parent.layer.msg("不是叶子类目");
        }

    });
    //弹层取消按钮
    $(".categoryLayerbtn_cancel").click(function () {
        parent.layer.close(index);
    });


    //-------------------
    //搜索框
    $('.btn_search').click(function () {
        $(".categorySearchContentShow ul").html("");
        var keyword = $('.keyword').val().trim();
        if (!keyword == "") {
            $('.categoryContent').hide();
            $('.categorySearchContent').show();

            findCtegoryByKeyword(keyword, function (data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        $(".categorySearchContentShow ul").append(" <li><label><input type=\"radio\" name=\"searchResult\"  />" + data[i] + "</label></li>");
                    }
                    //添加默认状态
                    $(".categorySearchContentShow ul").find("li:first").addClass("active");
                    $(".categorySearchContentShow ul").find("li:first").find("input").attr("checked", "checked");
                    //设置面包屑
                    categoryCrumbs3 = $(".categorySearchContentShow ul").find("li").eq(0).text();
                    $(".categoryCrumbs").text(categoryCrumbs3);
                }
                else {
                    $(".categorySearchContentShow ul").append("<div>抱歉没有找到与关键字<em class=\"red\">" + keyword + "</em>相关的类目</div>");
                }
            });
        }
       
    });
    $('.keyword').keydown(function (e) {
        if (e.keyCode == 13) {
            $('.btn_search').click();
        }
    });
    $(".categorySearchContentShow").on("click", "label", function () {
        $(this).parent("li").addClass("active");
        $(this).parent("li").siblings().removeClass("active");

        categoryCrumbs3 = $(this).text();
        $(".categoryCrumbs").text(categoryCrumbs3);
    });

    $(".backToSelect").click(function () {
        var str = $(".categoryCrumbs").text();
        $('.categoryContent').show();
        $('.categorySearchContent').hide();
        back(str);
    });

    function findCtegoryByKeyword(keyword, callback) {
        $.post('/CategoryLayer/SearchCtegory', { 'keyword': keyword }, function (data) {
            callback(JSON.parse(data));
        });

    }
</script>
